<template>
  <div class="searchResult">
    <!-- 搜索框 -->
    <div class="searchInput">
      <van-search
        v-model.trim="searchKeyword"
        placeholder="请输入搜索关键词"
        @focus="handleFocus"
      />
    </div>
    <!-- 遮罩层 -->
    <van-overlay :show="overlayShow || priceDailog " />

    <!-- 综合、价格、分类 -->
    <div class="searchResultHead">
      <div class="composite" @click="cancelDailog" :class="{active:!overlayShow && !priceDailog}">综合</div>
      <div class="price" @click="showPriceDailog" :class="{active:priceDailog}">
        价格
        <div class="iconwrap" >
          <van-icon name="arrow-up" />
          <van-icon name="arrow-down" />
        </div>
      </div>
      <div class="category" @click="showCategoryDailog" :class="{active:overlayShow}">分类</div>
        <!-- 点击分类显示的弹框 -->
      <div class="categoryName" v-if="overlayShow">
        <van-tag plain :color="categoryItem === categoryList[0]?'#dd1a21':''" v-for="categoryItem in categoryList" :key="categoryItem.id" @click="handleSearchList(categoryItem)">{{categoryItem.name}}</van-tag>
      </div>
        <!-- 点击价格显示的弹框 -->
      <div class="showPriceDailog" v-if="priceDailog">
          <div class="selectPrice">
            <span class="filterPrice">筛选</span>
            <input class="floorPrice" placeholder="最低价格" v-model="floorPrice"/>——<input class="topPrice" placeholder="最高价格" v-model="upperPrice"/>
          </div>
          <div class="sortPrice">
            <span class="filterPrice">排序</span>
            <div class="floorPrice floorBtn" @click="changeSelected(false)" :class="{active:isSelected === false}">从低到高</div>
            <div class="topPrice topBtn" :class="{active:isSelected === true}" @click="changeSelected(true)">从高到低</div>
          </div>
          <div class="btnCollections">
              <div class="cancelA" @click="priceDailog = false">取消</div>
              <div class="confirmA" :class="{active:priceDailog}" @click="changePrice">确定</div>
          </div>
      </div>
    </div>

    <!-- 内容区 -->
    <ul class="goodsListWrap">
      <li
        class="goodsItem"
        v-for="goodsItem in searchDirectlyList"
        :key="goodsItem.id"
      >
        <div class="goodsImgWrap">
          <img class="goodsImg" :src="goodsItem.listPicUrl" alt="" />
        </div>
        <div class="goodsDesc">{{ goodsItem.name }}</div>
        <!-- <div class="goodsSellout"></div>  -->
        <span class="sellOut" v-if="goodsItem.itemTagList.length !== 0"
          >售罄</span
        >
        <div class="priceWrap">
          <span class="newPrice">￥{{ goodsItem.retailPrice }}</span>
          <del class="oldPrice" v-show="goodsItem.counterPrice"
            >￥{{ goodsItem.counterPrice }}</del
          >
        </div>
        <!-- 活动信息 -->
        <div class="onSaleWrap" v-if="isLimitedFlag !== goodsItem.limitedFlag">
          <img
            src="//yanxuan.nosdn.127.net/b268d0d2f46c41d3b3edf5fa33eea3de.png"
            alt=""
          />
          <span class="onSaleTitle">{{
            goodsItem.finalPriceInfoVO.banner.title
          }}</span>
          <span class="onSaleDay">{{
            goodsItem.finalPriceInfoVO.banner.content
          }}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { reqSearchResult } from "@/api";

export default {
  name: "searchResult",
  data() {
    return {
      floorPrice: '',//输入的最低价格
      upperPrice: '',//输入的最高价格
      priceDailog: false,//点击价格显示的弹窗
      overlayShow: false,//点击分类显示的弹窗
      searchKeyword: "", //输入框内的关键字
      searchDirectlyList: [], //页面搜索回来的数据
      isLimitedFlag: 0, //是否有活动的标识:特价……
      categoryList: [],//分类数据
      isSelected: -1,//按钮是否处于点击状态
      searchParams: {//所有搜索需要的参数
        floorPrice:'', //最低价格
        upperPrice:'',//最高价格
        keyword:'', //关键字
        descSorted:false, //排序 ,false ：从低到高，true ：从高到低
        sortType: 0,//是否进行排序筛选
      }, 
    }
  },
  methods: {
    // 按钮点击互斥回调，只改变按钮状态，不收集数据
    changeSelected(type){
      if(type === this.isSelected){//如果相等，说明点击过，即点击的是同一个。
        this.isSelected = -1
      }else{
        this.isSelected = type
      }
    },
    // 点击确定按钮，收集数据，整理格式，发请求
    async changePrice(){
      let descSorted = true//定义一个变量存储起来descSorted的值
      let sortType = 0//定义一个变量存储起来sortType的值
      if(this.isSelected !== -1){
        descSorted = this.isSelected// true 或  false
        sortType = 1//确认排序
      }
      this.searchParams = {
        floorPrice: this.floorPrice || -1,
        upperPrice: this.upperPrice || -1,
        keyword:this.searchKeyword,
        descSorted,
        sortType
      } 
      // 关闭遮罩层
      this.priceDailog = false
      // 发请求刷新数据
      this.initData(this.searchKeyword)
    },
    // 点击综合关闭其他遮罩层
    cancelDailog(){
        this.overlayShow = false
        this.priceDailog = false
    },
    // 点击分类弹窗内容的tag标签跳转的回调
    handleSearchList(categoryItem){
        this.overlayShow = false
        this.initData(categoryItem.name)
    },
     // 显示价格弹窗
    showPriceDailog(){
      this.overlayShow = false
      this.priceDailog = !this.priceDailog
    },
    // 显示分类弹窗
    showCategoryDailog() {
      this.priceDailog = false
      this.overlayShow = !this.overlayShow
    },
    //改变页面显示
    handleFocus() {
      this.$emit("handleFocus");
    },
    //  页面初始化，整理数据格式，传参
    async initData(keyword) {
      this.searchKeyword = keyword;
      // 请求参数为后台必须的参数，所以需要按照后台需要参数格式传入
      const result = await reqSearchResult({
        floorPrice: this.floorPrice || -1,
        upperPrice: this.upperPrice || -1,
        descSorted: this.searchParams.descSorted,
        sortType:this.searchParams.sortType,
        keyword,
      })
      // 请求回来将结果赋值给data中的数据，用于页面的展示
      this.searchDirectlyList = result.data.directlyList;
      this.categoryList = result.data.categoryL1List
    },
  },
  mounted() {},
};
</script>

<style lang='less' scoped>
.searchResult {
  .searchInput{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 4;
  }
  .searchResultHead {
    position: fixed;
    top: 54px;
    width: 100%;
    z-index: 4;
    display: flex;
    font-size: 14px;
    color: #333;
    text-align: center;
    background-color: #fafafa;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    .composite,
    .price,
    .category {
      flex: 1;
    }
    .active {
      color: #dd1a21;
    }
    .price {
      position: relative;
      .iconwrap {
        position: absolute;
        top: 0;
        left: 65%;
        display: flex;
        flex-direction: column;
        .van-icon-arrow-down,
        .van-icon-arrow-up {
          width: 5px;
          height: 8px;
          color: #999;
        }
      }
    }
  }
  // 点击分类显示的弹框
  .categoryName{
      position: absolute;
      top: 41px;
      z-index: 4;
      display: flex;
      flex-wrap: wrap;
      padding: 20px 32.5px 0;
      background: #fff;
      height: 130px;
      overflow: auto;
      // box-sizing: border-box;
      .van-tag.van-tag--plain.van-tag--default{
          padding: 5px 10px;
          border-radius: 4px;
          margin: 0 20px 20px 0;
          color: #666;
          border-color: #999;
          font-size: 14px;
      }
  }
  .showPriceDailog{
    position: absolute;
    top: 41px;
    z-index: 4;
    padding: 20px 0 0;
    background: #fff;
    height: 150px;
    width: 100%;
    .selectPrice,.sortPrice{
      width: 100%;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      margin-left: 15px;
      .active {
        color: #dd1a21 !important;
        border: 1px solid #dd1a21 !important;
      }
      .floorPrice,.topPrice{
        padding: 0;
        width: 130px;
        height: 28px;
        line-height: 28px;
        margin: 0 4px;
        text-align: center;
        box-sizing: border-box;
      }
      .floorBtn,.topBtn{
          border: 1px solid #999;
          color: #666;
      }
      .filterPrice{
        margin-right: 10px;
      }
    }
    .btnCollections{
      display: flex;
      border-top: 1px solid #d9d9d9;
      height: 52px;
      width: 100%;
      .cancelA,.confirmA{
          flex: 1;
          text-align: center;
          line-height: 52px;
          font-size: 14px;
      }
      .cancelA{
        border-right: 1px solid #d9d9d9;
      }
    }
  }
  .goodsListWrap {
    flex: 1;
    display: flex; //开启弹性布局flex.类似于浮动效果，
    flex-wrap: wrap; //换行
    padding-left: 10px;
    padding-top: 105px;
    overflow: auto;
    .goodsItem {
      flex: 1; //元素自适应撑开
      min-width: 40%; //每行内每一个元素站位的大概最小百分比
      max-width: calc(50% - 10px); //解决最后只有一张图片时铺满整屏的问题
      margin-right: 10px; //设置了元素间的间距
      margin-bottom: 26px;
      // 以下整体样式就是图片的防抖动处理：防止加载过程出现图片未显示时出现灰色块的问题
      .goodsImgWrap {
        position: relative;
        padding-bottom: 100%; //图片防抖动：图片的宽高比，撑出的一个正方形
        height: 0; //必须的
        .goodsImg {
          position: absolute; //相对于图片外包裹定位
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 6px;
        }
      }
      .goodsDesc {
        color: #12161c;
        font-size: 15px;
        margin-top: 8px;
        // 多行文字设置显示2行
        white-space: pre-wrap; //换行保留空格
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical; //
        -webkit-line-clamp: 2; //显示两行文字
      }
      .sellOut {
        padding: 0 4px;
        font-size: 12px;
        color: #333;
        border: 1px solid #333;
        border-radius: 10px;
      }
      .priceWrap {
        .newPrice {
          color: rgb(250, 30, 50);
          font-size: 20px;
        }
        .oldPrice {
          font-size: 12px;
          color: #999;
        }
      }
      .onSaleWrap {
        position: relative;
        width: 100%;
        background: #ffe9eb;
        border-radius: 40px;
        display: flex;
        align-items: center;
        margin-top: 5px;
        padding: 2px 0 2px 3px;
        box-sizing: border-box;
        > img {
          position: absolute;
          top: -2.5px;
          left: 18px;
          z-index: -1;
        }
        .onSaleTitle {
          font-size: 12px;
          color: #fff;
          background: #dd1a21;
          border-radius: 60px;
          padding: 3px 5px;
          margin-right: 5px;
        }
        .onSaleDay {
          color: #fa1e32;
          font-size: 12px;
        }
      }
    }
  }
}
</style>